import * as THREE from 'three'
// import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
import { HouQiChuLi } from './houQiChuLi/HouQiChuLi.js'

// 最好浏览器启用独显
class HuanJing {
	width = Math.max(window.innerWidth, window.innerHeight)
	height = Math.min(window.innerWidth, window.innerHeight)
	shiYiDongDuan = /Android|HarmonyOS|iPhone|iPad/.test(window.navigator.userAgent) // 是移动端
	rongQi = null
	huaBu = null
	renderer = null
	houQiChuLi = null
	scene = new THREE.Scene()
	// 模型的原点需在相机之前才会渲染
	camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.01, 1e+10)
	clock = new THREE.Clock()

	constructor(rongQiId) {
		Object.defineProperty(this, 'renderer', {
			value: new THREE.WebGLRenderer({ logarithmicDepthBuffer: true, alpha: true })
		})
		
		this.renderer.setPixelRatio(window.devicePixelRatio)
		this.renderer.setSize(this.width, this.height)
		this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
		this.renderer.toneMappingExposure = 0.8; // 色调强度
		this.renderer.shadowMap.enabled = true
		this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
		
		this.houQiChuLi = new HouQiChuLi(this.renderer, this.scene, this.camera)

		this.scene.background = new THREE.Color().setHSL( 0, 0, 0 )

		this.rongQi = document.getElementById(rongQiId)
		this.rongQi.appendChild(this.renderer.domElement)
		this.huaBu = this.renderer.domElement
		// 页面尺寸响应
		let resizeObserver = new window.ResizeObserver((entries, observer) => {
			for (const entry of entries) {
				if (entry.target === this.rongQi) this.resize.bind(this)()
			}
		})
		resizeObserver.observe(this.rongQi)
	}
	
	xuanRan() {
		// this.renderer.render( this.scene, this.camera )
		this.houQiChuLi.xuanRan()
	}

	resize() {
		let width = this.width = Math.max(window.innerWidth, window.innerHeight)
		let height = this.height = Math.min(window.innerWidth, window.innerHeight)
		this.camera.aspect = width / height
		this.camera.updateProjectionMatrix()
		this.renderer.setSize(width, height)
	}
}

export let huanJing = new HuanJing('rong-qi')